<template>
  <!-- 酒店模块 -->
  <div class="container_box">
    <Header></Header>
    <div class="container_main warpper_box">
      <h2>订酒店</h2>
      <div class="selecthotelItem">
        <div class="top_select">
          <div class="select_box">
            <div class="item destination">
              <div class="label">入住城市</div>
              <el-input placeholder="入住城市" ref="selectCity" v-model="oderHotal.city"></el-input>
              <div class="selectdestination" v-if="isShowCity">
                <div class="top_bar">
                  <div class="l">选择城市(可直接输入城市或名称)</div>
                  <div class="r" @click="isShowCity = false">
                    <span class="el-icon-close changeHand"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="label">酒店名称:</div>
              <el-input placeholder="酒店名称/连锁品牌" v-model="oderHotal.bind"></el-input>
            </div>
          </div>

          <div class="search_hotel">
            <el-button type="primary" @click="search_hotel" icon="el-icon-search">搜索酒店</el-button>
          </div>
        </div>
      </div>

      <div class="hotel_tip">
        <div class="item zhusugonglue">
          <div class="left"></div>
          <div class="right">
            <a href="#">
              <p>住宿攻略</p>
              <span>区域攻略到特色主题.应有尽有</span>
            </a>
          </div>
        </div>
        <div class="item zhuangxianjiage">
          <div class="left"></div>
          <div class="right">
            <a href="#">
              <p>专享价格</p>
              <span>多平台价格对比,天天专享特惠</span>
            </a>
          </div>
        </div>
        <div class="item zhenshidianping">
          <div class="left"></div>
          <div class="right">
            <a href="#">
              <p>真实点评</p>
              <span>超过1000万真实用户点评和游记</span>
            </a>
          </div>
        </div>
      </div>
      <div class="handpick">
        <div class="title_bar">
          <h4>精选酒店</h4>
          <span>精选特惠酒店,覆盖700多个城市,轻松入住</span>
        </div>
        <div class="handpickMian">
          <div class="l">
            <div class="item">
              <h4 class="subtitle">酒店入驻城市</h4>
              <ul>
                <li v-for="(item, index) in city_list" :key="index">{{item.city}}</li>
              </ul>
            </div>
            <div class="item">
              <h4 class="subtitle">品牌连锁</h4>
              <ul>
                <li v-for="(item, index) in hotel_list" :key="index">{{item.bind}}</li>
              </ul>
            </div>
          </div>
          <div class="r">
            <div class="hotelList">
              <div class="hostCity">
                <h5>热门入住城市:</h5>
                <ul>
                  <li
                    :class="isactive == item.id ? 'active' : ''"
                    v-for="item in hotcity_list"
                    :key="item.id"
                    @click="handle_city(item.id,item.city)"
                  >{{ item.city }}</li>
                </ul>
              </div>
              <div class="hoter_main">
                <ul>
                  <li v-for="item in hothotel_list" :key="item.id" @click="orderHotel(item.title,item.price)">
                    <img :src="item.image" alt />
                    <p>
                      <a href>{{ item.title }}</a>
                      <span>¥{{item.price}}</span>
                    </p>
                    <div class="tip">{{ item.start=="nan"?'未评价':item.start }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <!-- 入住酒店 -->
        <div class="enterHotel">
          <div class="Hotel">
            <div class="l">
              <div class="titleTop">
                <h4>热门城市酒店</h4>
              </div>
              <div class="hotel_main">
                <ul>
                  <li v-for="item in all_hotel_list" :key="item.id" @click="orderHotel(item.title,item.price)">
                    <div class="bigimage">
                      <img :src="item.image" alt />
                    </div>
                    <div class="subtitle">{{item.title}}</div>
                    <div class="price_bar">
                      <p>
                        <span>{{item.price}}</span>
                      </p>
                      <div class="start">
                        <el-rate v-model="value2"></el-rate>
                      </div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="r">
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/rujia.gif" alt />
                <p>如家</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/7day.gif" alt />
                <p>7天连锁</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/hanting.gif" alt />
                <p>汉庭</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/jinjiang.gif" alt />
                <p>锦江之星</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/gelin.gif" alt />
                <p>格林豪泰</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/motai.gif" alt />
                <p>莫泰</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/su8.gif" alt />
                <p>速8</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/xiangge.gif" alt />
                <p>香格里拉</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/buding.gif" alt />
                <p>布丁</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/xilai.gif" alt />
                <p>喜来登</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/weiye.gif" alt />
                <p>维也纳</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/yibisi.gif" alt />
                <p>宜必思</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/chengshi.gif" alt />
                <p>城市快捷</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/huangguan.gif" alt />
                <p>皇冠假日</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/wanhao.gif" alt />
                <p>万豪</p>
              </div>
              <div class="item">
                <img src="https://lvyou1.xiluweb.com/liansuo/kaiyue.gif" alt />
                <p>凯悦</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import { get } from "@/plugins/api";

export default {
  props: {},
  components: {},
  data() {
    return {
      // 是否显示入住城市
      isShowCity: false,
      city_list: [], // 城市列表
      hotel_list: [],
      hothotel_list: [],
      isactive: 0,
      selectLetter: [{ name: "热门城市" }],
      letterIndex: 0, // 选择字母的索引
      value2: 5,
      hotcity_list: [], // 城市列表
      // 鼠标经过的项
      thmenIndex: 0,
      // 酒店标题项
      HotelIndex: 0,
      all_hotel_list: [],
      // 酒店数据
      oderHotal: {
        ciry: "", // 出行目的地
        bind: ""
      }
    };
  },
  methods: {
    // 选择目的
    selectDestination() {
      this.isShowCity = true;
    },

    toggleTopical(index) {
      this.thmenIndex = index;
    },
    // 酒店标题项
    toggleHotel(index) {
      this.HotelIndex = index;
    },
    // 获取城市列表
    getCityList() {
      get("/hotel/get_city").then(res => {
        if (res.code == 0) {
          this.city_list = res.data;
        }
      });
    },
    // 获取
    handle_city(id, city) {
      console.log(id, city);
      this.isactive = id;
      get("/hotel/get_hot_hotel_list", { type: id, city: city }).then(res => {
        if (res.code == 0) {
          // res.data
          this.hothotel_list = res.data;
        }
      });
    },
    // 获取酒店数据
    gethotel_data() {
      get(`/hotel/get_hotel_list`).then(res => {
        if (res.code == 0) {
          this.hotel_list = res.data;
        }
      });
    },

    // 获取热门入住城市
    getHotCity() {
      get("hotel/get_hotel_city").then(res => {
        if (res.code == 0) {
          this.hotcity_list = res.data;
        }
      });
    },
    // 热门酒店列表
    getHotList() {
      get("/hotel/get_all_list").then(res => {
        // console.log(res)
        if (res.code == 0) {
          this.all_hotel_list = res.data;
        }
      });
    },
    // 定住酒店
    orderHotel(title,order){
      this.$router.push({
        path:'/zhifu',
        query:{
          price:order,
          title,
        }
      })
    },
    // 点击搜索酒店
    search_hotel() {
      // post("/hotel/select_hotel").then(res => {

      // });
      if (!this.oderHotal.bind || !this.oderHotal.city) {
        this.$message.warning("请输入完整信息");
        return;
      }
      this.$router.push({
        path: "/queryHotel",
        query: {
          bind: this.oderHotal.bind,
          city: this.oderHotal.city
        }
      });
    }
  },
  mounted() {
    this.getCityList();
    this.gethotel_data();
    this.getHotCity();
    this.handle_city(-1, "全部");
    this.getHotList();
  },
  watch: {},
  computed: {},
  filters: {}
};
</script>
<style lang="scss" scoped>
.container_box {
  background: #fff;
}
.container_main {
  & > h2 {
    font-size: 24px;
    margin: 30px 0;
  }
  .selecthotelItem {
    margin-bottom: 30px;
    /deep/.el-card__body {
      padding: 2px 12px;
    }
  }
  .top_select {
    width: 100%;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .select_box {
      display: flex;
      align-items: center;
      .item {
        margin-right: 10px;
        display: flex;
        align-items: center;
        .label {
          width: 80px;
        }
        &.destination {
          position: relative;
          .selectdestination {
            position: absolute;
            left: 2px;
            z-index: 99;
            top: 46px;
            border: 1px solid #2288ee;
            background-color: #fff;
            color: #fff;
            width: 500px;
            .top_bar {
              padding: 2px 6px;
              background-color: #2288ee;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
            .city_main {
              padding: 10px;
              min-height: 300px;
              .top {
                position: relative;
                height: 40px;
                color: #333;
                border-bottom: 1px solid #2288ee;
                ul {
                  position: absolute;
                  bottom: -2px;
                  display: flex;
                  align-items: center;

                  li {
                    color: #333;
                    margin-left: 10px;
                    font-size: 12px;
                    height: 30px;
                    padding: 3px 6px;
                    cursor: pointer;
                    &.active {
                      border: 1px solid #2288ee;
                      border-bottom: 1px solid #fff;
                      background-color: #fff;
                    }
                  }
                }
              }
              .ctiy-item {
                .box {
                  padding: 10px 15px;
                  color: #2288ee;
                  ul {
                    display: flex;
                    flex-wrap: wrap;
                    li {
                      margin-right: 10px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .search_hotel {
      background-color: #37bcfb;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      span {
        font-size: 20px;
        color: #fff;
      }
    }
  }
  .hotel_tip {
    display: flex;
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      // justify-content: center;
      .left {
        width: 42px;
        height: 50px;
        background: url("../static/hotel/hotel-sprites1.png") no-repeat;
        margin-right: 10px;
      }

      .right {
        a {
          color: #ccc;
          p {
            color: #666;
            font-size: 14px;
          }
          span {
            font-size: 12px;
          }
        }
      }
      &.zhusugonglue {
        .left {
          background-position: 2px 0;
        }
      }
      &.zhuangxianjiage {
        .left {
          background-position: -40px 0px;
        }
      }
      &.zhenshidianping {
        .left {
          background-position: -88px 0px;
        }
      }
    }
  }
  // 精选酒店
  .handpick {
    height: 100%;
    margin-top: 40px;
    .title_bar {
      display: flex;
      align-items: center;
      height: 43px;
      width: 100%;
      background: url("https://www.lvyou114.com/tem/v2/skin/images/hoteltit.gif");
      h4 {
        color: #ba92dd;
        font-size: 26px;
      }
      span {
        margin-left: 30px;
        font-size: 12px;
        color: #ccc;
      }
    }
    .handpickMian {
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      .l {
        width: 300px;
        .item {
          margin-top: 20px;
          h4.subtitle {
          }
          ul {
            margin-top: 10px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            li {
              width: 70px;
              text-align: center;
              color: #355976;
            }
          }
        }
      }
      .r {
        flex: 1;
        .hotelList {
          .hostCity {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            h5 {
              margin-right: 10px;
            }
            ul {
              display: flex;
              li {
                margin-left: 20px;
                padding: 2px 10px;
                cursor: pointer;
                &:hover {
                  color: red;
                }
                &.active {
                  color: #fff;
                  background-color: #2288ee;
                  border-radius: 4px;
                }
              }
            }
          }
          .hoter_main {
            & > ul {
              display: flex;
              align-items: center;
              flex-wrap: wrap;
              li {
                width: 240px;
                height: 180px;
                margin-right: 10px;
                position: relative;
                margin-right: 20px;
                margin-bottom: 15px;
                cursor: pointer;
                text-align: center;
                img {
                  width: 100%;
                  height: 100%;
                }
                p {
                  position: absolute;
                  width: 100%;
                  left: 50%;
                  transform: translateX(-50%);
                  bottom: 0px;
                  background: #ebefef;
                  display: flex;
                  justify-content: space-between;
                  a {
                    color: #355976;
                    // width: 80%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                  }
                  span {
                    color: #ff5741;
                    font-size: 12px;
                    font-family: arial;
                    width: 60px;
                  }
                }
                .tip {
                  position: absolute;
                  left: 4px;
                  top: 4px;
                  padding: 6px 8px;
                  font-size: 12px;
                  background-color: #ff624f;
                  color: #fff;
                }
              }
            }
          }
        }
      }
    }
    .enterHotel {
      .Hotel {
        display: flex;
        justify-content: space-between;
        .l {
          flex: 1;
          .titleTop {
            height: 60px;
            display: flex;
            align-items: center;
            h4 {
              margin-right: 40px;
              font-size: 20px;
              font-weight: 400;
            }
            .box {
              ul {
                display: flex;

                li {
                  margin-right: 10px;
                  padding: 4px 10px;

                  border-radius: 4px;
                  &.active {
                    color: #fff;
                    background: #ff8800;
                  }
                }
              }
            }
          }
          .hotel_main {
            ul {
              display: flex;
              flex-wrap: wrap;
              li {
                width: 160px;
                margin-right: 16px;
                .bigimage {
                  width: 100%;
                  img {
                    width: 100%;
                    height: 106px;
                  }
                }
                .price_bar {
                  display: flex;
                  // align-items: center;
                  p {
                    font-size: 12px;
                    margin-right: 10px;
                    span {
                      color: #ff8800;
                      font-weight: 900;
                    }
                  }
                  .start {
                    /deep/ .el-rate__icon {
                      padding-top: 8px;
                      margin: 0;
                      font-size: 12px;
                    }
                  }
                }
              }
            }
          }
        }
        .r {
          width: 300px;
          border-left: 1px dashed #cccc;
          padding-left: 50px;

          padding-bottom: 30px;
          .item {
            display: inline-block;
            width: 85px;
            height: 90px;
            border: 1px #e5e5e5 solid;
            margin-top: 15px;
            margin-right: 20px;
            padding: 8px 0;
            text-align: center;
            background-color: #fcfcfc;
          }
        }
      }
    }
  }

  // .hotelMain,
  // .specialHotel {
  //   .top_title {
  //     text-align: center;
  //     font-size: 20px;
  //     padding: 20px 0;
  //   }
  //   .main {
  //     .title {
  //       ul {
  //         display: flex;
  //         align-items: center;
  //         height: 100%;

  //         li {
  //           flex: 1;
  //           text-align: center;
  //           cursor: pointer;
  //           height: 70px;
  //           font-size: 16px;
  //           &.active {
  //             color: #37bcfb;
  //             border-bottom: 5px solid #37bcfb;
  //             border-radius: 2px;
  //           }
  //         }
  //       }
  //     }
  //     .main_list {
  //       margin-top: 10px;
  //       ul {
  //         display: flex;
  //         align-items: center;
  //         flex-wrap: wrap;

  //         li {
  //           position: relative;
  //           width: 33%;
  //           padding-right: 10px;
  //           box-shadow: 1px 1px 20px #ddd;
  //           img {
  //             width: 100%;
  //           }
  //           .box {
  //             text-align: center;
  //             position: absolute;
  //             left: 50%;
  //             top: 50%;
  //             transform: translate(-50%, -50%);
  //             color: #fff;
  //             span {
  //               font-size: 20px;
  //             }
  //             p {
  //               font-size: 14px;
  //               margin-top: 6px;
  //             }
  //           }
  //         }
  //       }
  //     }
  //   }
  // }
}
</style>
